<template>

    <div style="margin-bottom: 15px">
        <div class="top-curved"></div>

        <v-container class="pb-0 white--text" style="position: relative">
            <v-row justify="space-between">
                <v-col class="d-flex align-center" cols="auto">
                    <v-avatar
                        size="24"
                        style="border: 2px solid white"
                        color="white"
                    >
                        <v-img src="/asset/loan/img/avatar.png"></v-img>
                    </v-avatar>
                    <h2 class="ml-1">客多多</h2>
                </v-col>

                <v-col cols="auto" style="margin-right: 30px">
                    <v-menu
                        v-model="menu"
                        :close-on-content-click="false"
                        :nudge-width="200"
                        offset-x
                    >
                        <template v-slot:activator="{ on, attrs }">
                            <v-btn icon v-bind="attrs" v-on="on" style="color: white" @click="showDialog = true">
                                <v-icon>mdi-map-marker</v-icon>
                                <span>{{ currentCity }}</span>
                            </v-btn>
                        </template>

                    </v-menu>
                </v-col>
            </v-row>

            <v-dialog
                v-model="showDialog"
                max-width="100vw"
                @click:outside="showDialog = false"
            >
                <v-card>
                    <div class="city-tit" style="padding: 10px">
                        <span class="" style="color: #df0b3d">热门城市</span> 请正确选择所在城市，贷款商家只受理本地客户贷款
                    </div>

                    <v-list class="pa-0" style="width: 100%;">
                        <v-list-item
                            v-for="(province, index) in provinces"
                            :key="index"
                        >
                            <v-row align="center"  style="border-top: 1px dashed #9b9e93">
                                <!-- 省份名称，占据六分之一宽度 -->
                                <v-col cols="3">
                                    <v-list-item-content>
                                        <v-list-item-title style="font-size: 14px;color: #87bf00">{{ province.name }}</v-list-item-title>
                                    </v-list-item-content>
                                </v-col>
                                <!-- 省份下的城市，占据五分之六宽度 -->
                                <v-col cols="9">
                                    <v-list-item-action>
                                        <v-row no-gutters>
                                            <v-col
                                                v-for="(city, cityIndex) in province.cities"
                                                :key="cityIndex"
                                                cols="auto"

                                            >
                                                <v-btn
                                                    style="color: rgb(226, 139, 65)"
                                                    text
                                                    @click="selectCity(city)"
                                                >
                                                    {{ city }}
                                                </v-btn>
                                            </v-col>
                                        </v-row>
                                    </v-list-item-action>
                                </v-col>
                            </v-row>
                        </v-list-item>
                    </v-list>
                </v-card>
            </v-dialog>

        </v-container>

    </div>

</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            showDialog: false,
            showList: false, // 控制列表显示的变量
            menu: false,
            currentCity: '北京',
            provinces: [
                {
                    name: '北京',
                    cities: ['北京']
                },
                {
                    name: '上海',
                    cities: ['上海']
                },
                {
                    name: '四川',
                    cities: ['成都','乐山','温州','彭镇','华阳','绵阳']
                },
                // ... 其他省份和城市
            ]
        };
    },
    // computed: {
    //     app_name() {
    //         return this.appName;
    //     }
    // },
    created() {
        this.load();
    },
    methods: {
        load() {
            axios
                .get(`/v1/home`)
                .then((response) => {
                    // this.app_name = response.data.data.app_name;
                })
                .catch(function () {})
                .then(function () {});
        },
        selectCity(city) {
            this.currentCity = city; // 更新当前城市名称
            this.showDialog = false; // 关闭对话框
        }
    }
};
</script>

<style>
div.top-curved {
    position: absolute;
    overflow: hidden;
    background-color: #ba2b39;
    height: 60px;
    width: 100%;
}
div.top-curved::before {
    background-color: #ba2b39;
    border-radius: 100%;
    position: absolute;
    content: "";
    bottom: 0;
}
</style>
